<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 引用模板 Header -->
    <div th:insert="bg/publicHead :: publicHead(${pageName})"></div>
    <!-- [ Header ] end -->

    <style type="text/css">
        .inputStyle{ padding:0px !important; }
        i{ cursor:pointer; }
        .red{ color:#FF3535; font-weight:700; }
        .blue{color:#0000ff; font-weight:700;}
        .img{width:50px; height:50px;}
        .Export{ display:flex; justify-content:flex-start; align-items:center; }
        .Export div{ margin-right:10px; }
        .firstClassDataimg{ width:50px; height:50px;}
        .imgsList{ display:flex; justify-content:flex-start; align-items:center; flex-direction:row; flex-wrap:wrap; }
        .imgs{ width:50px; height:50px; }
        .red{ color:red !important; text-decoration:underline;cursor: pointer; }
        .text{ cursor:pointer; }
        .input{ display:none; }
        .sortNum{ display:none; }
        .sortNum input,
        .input input
        { border:1px solid #ccc; margin:0 auto; width:150px; box-sizing:border-box; padding:5px; border-radius:5px; text-align:center; }
        .selectUpload{  position:relative; left:50px; }

    </style>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/stroage.js" type="text/javascript" charset="UTF-8"></script>
    <script src="/js/comm.js" type="text/javascript" charset="UTF-8"></script>
    <script th:inline="javascript">
        window.onerror=function(){return true;};
        var reg=/^1((34[0-8]\d{7})|((3[0-3|5-9])|(4[5-7|9])|(5[0-3|5-9])|(66)|(7[2-3|5-8])|(8[0-9])|(9[1|8|9]))\d{8})$/
        var ServerIP=[(${ServerIP!=null?'"'+ServerIP+'"':'"'+'"'})];
        var beForUpdateName=null;
        var maxFileSize=500; //KB
        var curphotoface=null; //当前上传图片返回的地址
        var isEditorMode=false; //是否有开启编辑器状态
        $(document).ready(function() {
            //页数跳转
            $("#pageItem").change(function (){
                //alert($(this).val());
                window.location.href="/bg/mFirst-"+$(this).val()+".html";
            });


            var isClick=false;
            $(".bodyAreaClick").click(function(){
                 if(isClick==true) reStore();
            });

            $(".input input").on("focus mouseover",function(e){
                isClick=false;
                e.preventDefault();
                e.stopPropagation();
            });
            $(".input input").on("blur mouseout",function(e){
                isClick=true;
                e.preventDefault();
                e.stopPropagation();
            });
            $(".sortNum input").on("focus mouseover",function(e){
                isClick=false;
                e.preventDefault();
                e.stopPropagation();
            });
            $(".sortNum input").on("blur mouseout",function(e){
                isClick=true;
                e.preventDefault();
                e.stopPropagation();
            });
            $(".editBtn").on("mouseover",function(e){
                isClick=false;
                //console.log(".editBtn mouseover  isClick",isClick);
                e.preventDefault();
                e.stopPropagation();
            });
            $(".editBtn").on("blur mouseout",function(e){
                isClick=true;
                e.preventDefault();
                e.stopPropagation();
            });

            var reStore=()=>{
                $(".text").css("display","block");
                $(".input").css("display","none");
                $(".sortNum").css("display","none");
            }

            //启用编辑
            $(".text").click(function(e){
                e.preventDefault();
                e.stopPropagation();
                reStore();
                var targetText=$(this).parents(".trClass").find(".text");
                var tatgetInput=$(this).parents(".trClass").find(".input");
                var targetSortNum=$(this).parents(".trClass").find(".sortNum");
                beForUpdateName=targetText.text();
                targetText.css("display","none");
                tatgetInput.css("display","block");
                targetSortNum.css("display","block");
                isClick=true;
                isEditorMode=true;
            })


            var checkEditor=(obj)=>{
                var targetText=obj.parents(".trClass").find(".text");
                var tatgetInput=obj.parents(".trClass").find(".input");
                var targetSortNum=obj.parents(".trClass").find(".sortNum");
                isEditorMode=tatgetInput.css("display")==='block';
                if(isEditorMode===false){
                    //alert("没有数据修改");
                    //console.log(targetText);
                    reStore();
                    targetText.css("display","none");
                    tatgetInput.css("display","block");
                    targetSortNum.css("display","block");
                    setTimeout(()=>{ isClick=true;},500);
                    return false;
                };
                return true;
            }

            //提交更改
            $(".editBtn").click(async function(){
                if(checkEditor($(this))==false) return;

                var firstObj=$(this).parents(".trClass").find(".first");
                var firstId=firstObj.attr("firstId");
                var firstVal=firstObj.text();
                var secondVal=$(this).parents(".trClass").find(".input input").val();
                $(this).parents(".trClass").find(".text").text(secondVal); //恢复文字显示

                var dataid=$(this).attr("id");
                var sortNum=$(this).parents(".trClass").find(".sortNum input").val();
                $(this).parents(".trClass").find(".stext").text(sortNum);  //恢复文字显示

                if(/\S/.test(secondVal)===false){
                    swal("请输入主类", "请输入主类名称", "error");
                    return;
                }
                if(/\S/.test(sortNum)===false){
                    swal("请输入排序", "排序不能为空", "error");
                    return;
                }
                if(confirm("是否提交信息?")){
                    var updateData={
                        id:dataid,
                        firstid:firstId,
                        firstclass:firstVal,
                        secondclass:secondVal,
                        secondsortnum:parseInt(sortNum), //排序号码
                        //beForUpdateSecondClassName:beForUpdateName  //修改前名称
                    };
                    /*console.log("上传前参数:",updateData)
                    return;*/
                    var res=await SyncJson("/api/updateSecondClass",updateData);
                    console.log("服务器更新返回结果:",res);
                    if(res.code===200){
                        alert("更新成功");
                        reStore();
                    }
                }
            });

            //删除按钮
            $(".delBtn").click(async function(){
                var dataid=$(this).attr("id");
                if (confirm("是否删除该二级分类?")) {
                    //alert("新闻id"+dataid);
                    deleteData={
                        id:dataid
                    };
                    if(deleteData!=null){
                        var res=await SyncJson("/api/deleteSecondClassById",deleteData);
                        if(res.code===200){
                            alert("删除成功");
                        }
                    }
                }
            });
        });
    </script>
</head>


<body class="background-img-7 bodyAreaClick">

<!-- [ navigation menu ] start -->
<!-- 引用模板 Header -->
<div th:insert="bg/templateLeft :: Menu(${pageName})"></div>
<!-- [ navigation menu ] end -->


<!-- [ Header ] start -->
<!-- 引用模板 Header -->
<div th:insert="bg/templateTop :: Header"></div>
<!-- [ Header ] end -->


<!-- [ Main Content ] start -->
<div class="pcoded-main-container"> <!--中间 Start -->

    <div class="pcoded-content">

        <!-- [ homePage ] start -->
        <!-- 引用模板 homePage -->
        <div th:insert="bg/homePage :: homePage"></div>
        <!-- [ homePage ] end -->


        <!-- [ Main Content ] start -->
        <!-- [ 内容区域 ] start -->
        <div class="row">
            <!-- 课程列表 -->

            <div class="col-xl-12 mainCotent">
                <h5><text th:text="${pageName}"></text></h5>
                <div><a href="/bg/mSecond">刷新</a> / <a class="red addNews">主类列表</a></div>
                <!-- json源码 -->
                <!--<div th:text="${imageesData}"></div>-->
                <!-- Latest Order start -->
                <div class="col-md-12">
                    <div class="card table-card latest-activity-card" style="margin-top:20px;">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover table-borderless">
                                    <!-- dt-responsive table-responsive -->
                                    <!--<table id="res-config" class="display table table-striped table-hover dt-responsive nowrap" style="width:100%">-->
                                    <thead>
                                    <tr>
                                        <th width="60px"><div align="center">id</div></th>
                                        <th width="130px"><div align="center">封面图</div></th>
                                        <th width="120px"><div align="center">主类</div></th>
                                        <th width="120px"><div align="center">二级分类</div></th>
                                        <th width="120px"><div align="center">排序</div></th>
                                        <th width="120px"><div align="center">操作</div></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="trClass" th:if="${secondClassData!=null}"  th:each="item:${secondClassData}">
                                        <td style="width:60px;"><div align="center" th:text="${item.id}"></div></td>
                                        <td style="width:130px; position:relative;">
                                            <div align="center"><img class="firstClassDataimg" th:src="${(item.firstphotoface==null || item.firstphotoface=='')?'/images/blacklogo.jpg':item.firstphotoface}"></div>
                                        </td>
                                        <td style="width:120px;">
                                            <div align="center" th:firstId="${item.firstid}" class="first" th:text="${item.firstclass}"></div>
                                        </td>
                                        <td style="width:120px;">
                                            <div align="center" class="text" th:text="${item.secondclass}"></div>
                                            <div align="center" class="input"><input type="text" th:value="${item.secondclass}" /></div>
                                        </td>
                                        <td style="width:120px;">
                                            <div align="center" class="text stext" th:text="${item.secondsortnum}"></div>
                                            <div align="center" class="sortNum"><input type="text" th:value="${item.secondsortnum}" /></div>
                                        </td>
                                        <td style="width:120px;">
                                            <div align="center">
                                                <a th:id="${item.id}" title="编辑" class="editBtn"><i class="icon feather icon-edit f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                                <a th:id="${item.id}" title="删除" class="delBtn"><i class="icon feather icon-delete f-w-600 f-16 m-r-15 text-c-green"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- [ Main Content ] end -->

    </div>

</div> <!--中间 End -->


<!-- 引用模板 Bottom -->
<div th:insert="bg/publicBottom :: publicBottom"></div>
<!-- [ Bottom ] end -->

<script src="/js/sweetalert.min.js"></script>
</body>



</html>